<template>
	<view class="main">
		<zmm-watermark :watermark="watermark"></zmm-watermark>
		<view class="revenueTitle">
			<view class="msg" @tap="show = true">
				<text>{{date}}</text>
				<image src="@/static/img/down.png" mode=""></image>
			</view>
			<view class="msg" v-if="!isShow">
				<text v-if="status == 0">未缴纳</text>
				<text v-else-if="status == 1">待审核</text>
				<text v-else>已缴纳</text>
			</view>
			<view class="msg" v-else>
			</view>
		</view>
		<view class="box">
			<u-empty v-if="isShow" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
				text="该月暂无收支记录"></u-empty>
			<view v-else class="revenue_Item">
				<view class="Item_title">
					<view>
						<image :src="userInfo.avatar" />
						<text>{{userInfo.nickname}}</text>
					</view>
					<view>{{userInfo.department_name}}</view>
				</view>
				<view>
					<view class="revenue_title">
						<text></text>
						<text>补贴类</text>
					</view>
					<view class="revenue_list">
						<view v-for="(item, index) in list" :key="index">
							<text>{{ item.name }}</text>
							<text>{{ item.price }}</text>
						</view>
					</view>
				</view>
				<view>
					<view class="revenue_title">
						<text style="background: #f54409"></text>
						<text>扣费类</text>
					</view>
					<view class="revenue_list">
						<view v-for="(item, index) in money" :key="index">
							<text>{{ item.name }}</text>
							<text>{{ item.price }}</text>
						</view>
					</view>
				</view>
				<view class="button" v-if="status == 0">
					<view>
						需缴纳:
						<text style="font-size: 14px; color: #8b8b8b; margin-left: 5px">{{all}}元</text>
					</view>
					<view class="btnBox">
						<button class="btn" v-if="status == 0" @tap="show1 = true">缴费</button>
						<button class="btn" v-if="status == 0" @tap="upload">上传缴纳凭证</button>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show1" confirmText="关闭" @confirm="show1 = false">
			<view class="slot-content">
				<image :src="codeUrl" mode=""></image>
			</view>
		</u-modal>
		<u-datetime-picker :show="show" v-model="value1" mode="year-month" :maxDate="maxDate" @cancel="show = false"
			@close="show = false" :closeOnClickOverlay="true" @confirm="confirm"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		profilecost,
		innerinfo,
		changeprofilecost
	} from '@/api/inner.js';
	import {
		getConfigs
	} from '@/api/user.js'
	export default {
		data() {
			return {
				list: [{
						name: '车补',
						price: '0'
					},
					{
						name: '房补',
						price: '0'
					},
					{
						name: '贷款补助',
						price: '0'
					},
					{
						name: '残疾人补助',
						price: '0'
					},
					{
						name: '党员补助',
						price: '0'
					},
					{
						name: '奖金',
						price: '0'
					},
					{
						name: '加班费',
						price: '0'
					},
					// { name: '其他', price: '0' }
				],
				money: [{
						name: '管理费',
						price: '0'
					},
					{
						name: '税费',
						price: '0'
					},
					{
						name: '物流损耗',
						price: '0'
					},
					{
						name: '餐费',
						price: '0'
					},
					{
						name: '个税',
						price: '0'
					},
					// { name: '其他', price: '0' }
				],
				show: false,
				value1: Number(new Date()),
				maxDate: Number(new Date()),
				isShow: true,
				date: '',
				status: 0,
				all: '',
				userInfo: {},
				seleUrl: '',
				watermark: '',
				id: '',
				codeUrl: '',
				show1:false
			};
		},
		onShow() {},
		onLoad() {
			getConfigs({
				name: 'skcode'
			}).then(res => {
				console.log(res)
				this.codeUrl = `https://app.guoshangufen.com${res.data.value}`
			})
			this.watermark = uni.getStorageSync('watermark')
			this.getInfo()
			let now = new Date()
			let y = now.getFullYear()
			let m = now.getMonth() + 1
			this.date = `${y}-${m}`
			this.getList();
		},
		methods: {
			async getInfo() {
				let res = await innerinfo()
				this.userInfo = res.data
				if (this.userInfo.type == 1) {
					this.money[0].name = '管理费'
				} else {
					this.money[0].name = '摊位费'
				}
				console.log(res)
			},
			upload() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.seleUrl = res.tempFilePaths[0]
						this.uploadFilePromise(this.seleUrl)
					}
				})
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://app.guoshangufen.com/api/common/upload',
						filePath: url,
						name: 'file',
						header: {
							'token': uni.getStorageSync('token') //自定义请求头信息 
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							res.data = JSON.parse(res.data)
							this.seleUrl = res.data.data.url
							console.log(this.seleUrl)
							changeprofilecost({
								id: this.id,
								image: this.seleUrl
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '上传成功',
										icon: 'none'
									})
									this.getInfo()
									this.getList()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					});
				})
			},
			confirm(e) {
				let date = new Date(e.value)
				let y = date.getFullYear()
				let m = date.getMonth() + 1
				this.date = `${y}-${m}`
				this.getList()
				this.show = false
			},
			async getList() {
				let res = await profilecost({
					date: this.date
				});
				console.log(res)
				if (res.code == 1) {
					this.list[0].price = res.data.car_subsidy
					this.list[1].price = res.data.house_subsidy
					this.list[2].price = res.data.money_subsidy
					this.list[3].price = res.data.disabled_subsidy
					this.list[4].price = res.data.party_subsidy
					this.list[5].price = res.data.bonus
					this.list[6].price = res.data.overtime_bonus
					this.money[0].price = res.data.manage_fee
					this.money[1].price = res.data.tax_fee
					this.money[2].price = res.data.trans_fee
					this.money[3].price = res.data.meal_fee
					this.money[4].price = res.data.income_tax
					this.all = res.data.cost_total
					this.status = res.data.status
					this.id = res.data.id
					this.isShow = false
				} else {
					this.isShow = true
				}
			}
		}
	};
</script>

<style lang="scss">
	.main {
		min-height: calc(100vh - 44px);
		background-color: #f2f2f2;

		/deep/.slot-content{
			image{
				width: 320px;
				height: 320px;
			}
		}

		/deep/.u-popup__content {
			border-radius: 20px;
		}

		/deep/.u-empty {
			background-color: #fff;
			border-radius: 6px;
			padding: 15px;
		}

		.revenueTitle {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			position: fixed;
			top: 44px;
			left: 0;

			.msg {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					display: block;
					text-align: center;
					padding: 7px 0;
					box-sizing: border-box;
					font-size: 12px;
					color: #232323;
				}

				image {
					width: 16px;
					height: 16px;
				}
			}
		}

		.box {
			padding: 40px 15px 10px;

			.revenue_Item {
				// margin: 14px 0 36px 0;
				padding: 11px 15px;
				box-sizing: border-box;
				background: #fff;
				border-radius: 6px 6px 6px 6px;

				.Item_title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 7px;
					font-size: 12px;
					color: #999999;

					view {
						font-size: 28rpx;
						color: #3d3d3d;
						display: flex;
						align-items: center;

						image {
							width: 28px;
							height: 28px;
							border-radius: 50%;
							margin-right: 10px;
						}
					}
				}

				.revenue_title {
					padding: 20px 0 8px 0;
					box-sizing: border-box;
					font-size: 14px;
					color: #3d3d3d;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #eeeeee;

					text:nth-child(1) {
						width: 7px;
						height: 21px;
						background: #097ef5;
						border-radius: 60px 60px 60px 60px;
						margin-right: 12px;
					}
				}

				.revenue_list {
					display: flex;
					flex-wrap: wrap;
					// border-bottom: 1px solid #EEEEEE;

					view {
						width: 50%;
						padding: 13px 20px;
						font-size: 14px;
						color: #999999;
						border-bottom: 1px solid #eeeeee;

						text {
							display: block;
						}

						text:nth-child(2) {
							margin-top: 17px;
							font-size: 14px;
							color: #232323;
						}
					}
				}

				.button {
					padding: 19px 0 16px 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 16px;
					color: #8b8b8b;

					.btnBox {
						flex: 1;
						display: flex;
						align-items: center;
						padding-left: 20px;
						justify-content: space-between;
					}

					.btn {
						width: 93px;
						height: 34px;
						background: #3aa2ff;
						border-radius: 6px;
						font-size: 12px;
						color: #ffffff;
						line-height: 34px;
					}
				}
			}
		}
	}
</style>